<script setup>
import { ref } from 'vue'

const studyContent = ref('')
const studySubject = ref('')
const studyLocation = ref('自习室')

const studyPlans = ref([])

function addStudyPlan() {
  if (studyContent.value && studySubject.value) {
    studyPlans.value.push({
      content: studyContent.value,
      subject: studySubject.value,
      location: studyLocation.value,
      completed: false
    })
    studyContent.value = ''
    studySubject.value = ''
    studyLocation.value = '自习室'
  }
}

function deleteStudyPlan(index) {
  studyPlans.value.splice(index, 1)
}
</script>

<template>
  <div class="mx-auto mt-10 w-4xl rounded-lg shadow">
    <section class="bg-gray-100 p-2 text-center">
      <h2 class="text-xl font-bold">学习计划表</h2>
    </section>

    <section class="mt-10 flex justify-between p-4">
      <div>
        <label class="rounded-l-md bg-gray-100 p-2 text-gray-600" for="section">学习科目</label>
        <input
          class="h-9 rounded-r-md border border-gray-200 pl-1 focus:outline-none"
          type="text"
          id="section"
          v-model="studyContent"
        />
      </div>
      <div>
        <label class="rounded-l-md bg-gray-100 p-2 text-gray-600" for="section1">学习内容</label>
        <input
          class="h-9 rounded-r-md border border-gray-200 pl-1 focus:outline-none"
          type="text"
          id="section1"
          v-model="studySubject"
        />
      </div>
      <div>
        <span class="rounded-l-md bg-gray-100 p-2 text-gray-600">学习地点</span>
        <select class="h-9 rounded-r-md border border-gray-200 pl-1 focus:outline-none" v-model="studyLocation">
          <option value="自习室">自习室</option>
          <option value="自习室2">自习室2</option>
          <option value="自习室3">自习室3</option>
          <option value="自习室4">自习室4</option>
          <option value="自习室5">自习室5</option>
        </select>
      </div>
      <div>
        <button class="btn btn-blue h-9 w-14 border-none" @click="addStudyPlan">添加</button>
      </div>
    </section>

    <section class="mt-4 p-4">
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
          <thead class="bg-gray-50">
            <tr>
              <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">序号</th>
              <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">学习科目</th>
              <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">学习内容</th>
              <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">学习地点</th>
              <th class="px-4 py-3 text-center text-sm font-medium text-gray-600">完成状态</th>
              <th class="px-4 py-3 text-center text-sm font-medium text-gray-600">操作</th>
            </tr>
          </thead>

          <tbody class="divide-y divide-gray-100 bg-white">
            <tr class="hover:bg-gray-50" v-if="studyPlans.length > 0" v-for="(plan, index) in studyPlans" :key="index">
              <td class="px-4 py-3 text-sm text-gray-700">{{ index + 1 }}</td>
              <td class="px-4 py-3 text-sm text-gray-700">{{ plan.subject }}</td>
              <td class="px-4 py-3 text-sm text-gray-700">{{ plan.content }}</td>
              <td class="px-4 py-3 text-sm text-gray-700">{{ plan.location }}</td>
              <td class="px-4 py-3 text-center">
                <input type="checkbox" class="h-4 w-4 text-blue-600" />
              </td>
              <td class="px-4 py-3 text-center">
                <button class="btn btn-red rounded-md border-none px-3 py-1 text-sm" @click="deleteStudyPlan(index)">
                  删除
                </button>
              </td>
            </tr>

            <tr v-else>
              <td class="px-4 py-6 text-center text-sm text-gray-400" colspan="6">暂无学习计划</td>
            </tr>
          </tbody>
        </table>
      </div>
    </section>
  </div>
</template>
